import React from 'react' //函数组件的快捷键是rfce
// 所有的组件组件名必须大写
// 在react16.8之前，函数组件没有状态，只能单纯得做展示性组件
// 在函数组件里也没有this
// 在16.8版本之后的react退出了hooks
// hooks就是特定得钩子，也可以理解为特定得在某个时间段自己执行得函数
import {useState,useEffect} from "react"
import axios from "axios"
// 函数组件本身没有生命周期，可以通过useEffect 可以模拟生命周期，
// useEffect 可以模拟生命周期，
// useState 就类似于类组件得state，可以声明状态
function Fun(props) {
  console.log(props,22222)
  let [name,setName] = useState("zhangsan")
  let [age,setAge] = useState(10)
  let [arr,setArr] = useState([])
  const setname = (name)=> {
    setName(name)
  }
  useEffect(()=>{ //useeffect第二个参数是一个空数组得时候可以模拟类组件得componentDidMount
    axios.get("/list").then(res=>{
      console.log(res.data,111111111);
      setArr(res.data)
  })
  },[])
  const setage = ()=>{
    setAge(age =>  age + 1); // 当需要用到上一次值得时候，setXXX接收一个函数，函数得参数就是累计值
  }
  return (
    <div>
        <span>{name}</span>
        <span>{age}岁</span>
        <button onClick={()=>{setname("wangwu")}}>点击我修改name</button>
        <button onClick={()=>{setage()}}>点击我修改年龄</button>

        {
             arr&&arr.length?arr.map((item,index)=>{
                return <h1 key={index}>{item.name}</h1>
              })
              :"暂无数据"
          }
          <h4 style={{color:"red"}}>{props&&props.send}</h4>
    </div>
  )
}

export default Fun